<template>
    <div class="echartsNav w-flex2">

        <!-- 我在使用element ui组件库的时候，会单独创建一个.vue 文件 -->

        <!-- 然后处理动态样式 -->
        <Wselect placeholder="跟进次数" disabled></Wselect>
        <Wselect placeholder="按月统计" disabled></Wselect>

        <Wselect placeholder="选择人员" @getSelectItem="getSelectPro" :optionsDatas="headerNav.pro"></Wselect>
        <Wselect placeholder="选择部门" @getSelectItem="getSelectSec" :optionsDatas="headerNav.section"></Wselect>
        <el-button @click="changeData">查询</el-button>
        <el-button>重置</el-button>

    </div>
</template>

<script setup lang="ts">
import Wselect from '@/components/Wselect/index.vue'
import { businessCList } from '@/http/api/businessC'

// 获取到后端的数据  =》 选择的数据

import { ref } from 'vue'

let headerNav = ref({
    time: [
        { label: '1月', value: '1月' },
        { label: '2月', value: '2月' },
        { label: '3月', value: '3月' }
    ],
    pro: [
        { label: '张三', value: '张三' },
        { label: '悟空', value: '悟空' },
        { label: '八戒', value: '八戒' },

    ],
    section: [
        { label: 'ka1', value: 'ka1' },
        { label: 'ka2', value: 'ka2' },

    ]
})

//    点击 查询获取到数据 =》 发送请求 =》然后看到 可视化图表

// 选择的人员
let selectPro = ref('')
const getSelectPro = (val: any) => {
    // console.log('名字',val);
    selectPro.value = val

}
// 选择的部门
let selectSection = ref('')
const getSelectSec = (val: any) => {
    // console.log('部门',val);
    selectSection.value = val


}
const changeData = () => {
    if (selectPro.value && selectSection.value) {
        // businessCList({ pro: selectPro.value, section: selectSection.value }).then(res => {
        //     console.log(res);
        // })
        getEchartsD(selectSection,selectPro);

    } else {
        console.log('请选择部门或人员！');
    }
}

// 在工作中， 我们的网络请求 =》 会自己再写一个处理方法进行包裹
   // 获取到后端数据后  =》 把这个数据发送给子组件（ 图表组件）
let getEchartsDs = ref({});
const getEchartsD = (selectSection:any={},selectPro:any={}) => {
    businessCList({ pro: selectPro.value, section: selectSection.value }).then((res:any) => {
        // console.log('res',res);  //获取到后端给的数据  => 把数据给图表
        getEchartsDs.value = res.datas

        emits('getEcharts',getEchartsDs.value)  //异步的
    })
}
// 1. 第一次执行时，需获取到默认数据
getEchartsD();

// 把数据给父组件 =》 子给父

let emits = defineEmits(['getEcharts'])   // 同步的

</script>

<style>

</style>